
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Student Management</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<h1>Student Management</h1>

<!-- 查询所有学生按钮 -->
<button id="btnFindAll">Find All Students</button>
<div id="resultFindAll"></div>

<!-- 根据id查询学生 -->
<label for="id">Enter ID:</label>
<input type="number" id="id">
<button id="btnFindById">Find Student by ID</button>
<div id="resultFindById"></div>

<!-- 添加学生表单 -->
<form id="formAddStudent">
  <label for="studentId">Student ID:</label>
  <input type="number" id="studentId" required><br>
  <label for="name">Name:</label>
  <input type="text" id="name" required><br>
  <label for="classInfo">Class:</label>
  <input type="text" id="classInfo" required><br>
  <label for="telephone">Telephone:</label>
  <input type="number" id="telephone" required><br>
  <label for="qq">QQ:</label>
  <input type="number" id="qq" required><br>
  <input type="submit" value="Add Student">
</form>
<div id="resultAddStudent"></div>

<!-- 修改学生表单 -->
<form id="formUpdateStudent">
  <label for="updateId">ID:</label>
  <input type="number" id="updateId" required><br>
  <label for="updateStudentId">Student ID:</label>
  <input type="number" id="updateStudentId" required><br>
  <label for="updateName">Name:</label>
  <input type="text" id="updateName" required><br>
  <label for="updateClassInfo">Class:</label>
  <input type="text" id="updateClassInfo" required><br>
  <label for="updateTelephone">Telephone:</label>
  <input type="number" id="updateTelephone" required><br>
  <label for="updateQq">QQ:</label>
  <input type="number" id="updateQq" required><br>
  <input type="submit" value="Update Student">
</form>
<div id="resultUpdateStudent"></div>

<!-- 删除学生 -->
<label for="deleteId">Enter ID to Delete:</label>
<input type="number" id="deleteId">
<button id="btnDeleteById">Delete Student by ID</button>
<div id="resultDeleteById"></div>

<script>
  // 查询所有学生
  $(document).ready(function () {
    $('#btnFindAll').click(function () {
      $.get('/students', function (data) {
        $('#resultFindAll').text(JSON.stringify(data));
      });
    });

    // 根据id查询学生
    $('#btnFindById').click(function () {
      var id = $('#id').val();
      $.get('/students/' + id, function (data) {
        $('#resultFindById').text(JSON.stringify(data));
      });
    });

    // 添加学生
    $('#formAddStudent').submit(function (e) {
      e.preventDefault();
      var student = {
        studentId: $('#studentId').val(),
        name: $('#name').val(),
        classInfo: $('#classInfo').val(),
        telephone: $('#telephone').val(),
        qq: $('#qq').val()
      };
      $.post('/students', student, function (data) {
        $('#resultAddStudent').text('Student added successfully: ' + JSON.stringify(data));
      });
    });

    // 修改学生
    $('#formUpdateStudent').submit(function (e) {
      e.preventDefault();
      var student = {
        id: $('#updateId').val(),
        studentId: $('#updateStudentId').val(),
        name: $('#updateName').val(),
        classInfo: $('#updateClassInfo').val(),
        telephone: $('#updateTelephone').val(),
        qq: $('#updateQq').val()
      };
      $.ajax({
        type: 'PUT',
        url: '/students',
        data: JSON.stringify(student),
        contentType: 'application/json',
        success: function (data) {
          $('#resultUpdateStudent').text('Student updated successfully: ' + JSON.stringify(data));
        }
      });
    });

    // 删除学生
    $('#btnDeleteById').click(function () {
      var id = $('#deleteId').val();
      $.ajax({
        type: 'DELETE',
        url: '/students/' + id,
        success: function () {
          $('#resultDeleteById').text('Student deleted successfully');
        }
      });
    });
  });
</script>
</body>

</html>